<template>
    <div>
        <van-nav-bar title="领券中心" left-text="返回"  class="leader"  left-arrow @click-left="handleBack">
            <template #right >
               <van-icon name="ellipsis" size='26px' color='#fff' class="pullTab" @click.stop="ShowHidden = !ShowHidden" />
               <Pulltab 
                v-if="ShowHidden" 
                @click.stop=""
               />
            </template>
        </van-nav-bar>
        <van-tabs color="#00D2C3" @click="onClick">
            <van-tab title="领取优惠券">
                <div class="box" v-for="(item) in couponlist" :key="item.id">
                    <ul class="leftUl" >
                        <li>
                            <span class="price">￥</span>
                            <span class="price">{{item.money}}</span>
                            <span class="canUse">满<span>{{item.condition}}</span>可用</span>
                        </li>
                        <li>
                            <p class="address">{{item.store_name}}</p>
                            <span class="allgoods">{{item.show_name}}</span>
                        </li>
                        <li class="time">有效期 <span>{{item.use_start_time}}</span> 至 <span>{{item.use_end_time}}</span></li>
                    </ul >
                    <ul class="rightUl">
                        <li>
                            <div class="receive" @click="handleReceive(item.id)">立即领取</div>
                        </li>
                    </ul>
                </div>
            </van-tab>
            <h3 v-if="couponlist.length">没有更多了~</h3>
            <van-tab title="领取红包"><img src="https://www.160dyf.com/Public/vue2/static/img/fail@3x.768730a.png" alt="暂无" width="200px" style="margin:10px auto"></van-tab>
        </van-tabs>
        
    </div>
</template>

<script>
import {couponlist} from '../api/coupon'
import Pulltab from '../components/Pulltab.vue'

import {  Toast } from 'vant';
    export default {
        components: {
           Pulltab,
        },
        data() {
            return {
                checked:true,
                ShowHidden: false,
                couponlist:[]
            }
        },
        
        methods: {
            HiddenClick () {
                this.ShowHidden = false
            },
            onClick( name,title) {
                Toast(title);
            },
            handleBack(){
                this.$router.go(-1)
            },
            handleReceive(idx){
                let {couponlist} = this
                let obj = null
                for(let i=0;i<couponlist.length;i++){
                    if(couponlist[i].id==idx){
                        obj=couponlist[i]
                    }
                }
                console.log(obj);
                 this.$store.commit("coupon/addCouponlist",obj)
                this.$router.push('/couponlist')
            }
        },
        created () {
            couponlist().then(res=>{
                this.couponlist=res.data.data
                console.log(res);
            })
        },
        mounted () {
            document.addEventListener('click', this.HiddenClick)
            },
    }
</script>

<style src="../assets/css/coupon.css" scoped>
</style>
<style scoped>
body{
    background-color: #fff;
}
::v-deep .van-nav-bar .van-icon {
  color: #fff;
  font-size: 20px;
}
::v-deep .van-nav-bar__left span,
::v-deep .van-nav-bar__title {
  color: #fff;
  font-size: 16px;
}
</style>